<template>
  <div class="card" >
     <div class="card-header">
      <a href="#">
        <span class="card-title"><input id="title" 
            type="text" 
            placeholder="不得超过12个字符"
            v-model="itemTitle" 
            value="itemTitle" /></span>
      </a>
      <input name="check" type="checkbox"/>
    </div>
    <div class="card-content">
      <div class="card-content-inner"> 
        <textarea id="content-text" v-model="itemContent"></textarea>
        </div>
    </div>
    <div class="card-tool">
        <a class="button button-link button-nav pull-right" @click="saveItem()">
            提交
        </a>
    </div>
  </div>

</template>

<script>
    import bus from './../bus.js'
    export default {
        props: ["item"],
        data() {
            return {
                itemTitle: '',
                itemContent: '',
                modifyIndex: -1
            }
        },
        mounted: function() {
            bus.$on("edit-item", (item) => {
                console.log(item)

                this.modifyIndex = item.index;
                this.itemTitle = item.item.title;
                this.itemContent = item.item.content;
            });
            bus.$on("add-end", (flag) => {
                if (flag == 1) {
                    this.itemTitle = "";
                    this.itemContent = "";
                    this.modifyIndex = -1
                }
            });
        },

        methods: {
            getCurTime: function() {
                var myDate = new Date();
                return myDate.getFullYear() + '年' + (myDate.getMonth()+1) + '月' +
                    myDate.getDate() + '日 ' + myDate.getHours() + ':' + myDate.getMinutes();
            },
            saveItem: function() {
                var newItem = {
                    index:this.modifyIndex,
                    title: this.itemTitle,
                    content: this.itemContent,
                    date: this.getCurTime()
                }
     
                bus.$emit('add-todo', newItem);
            },
            quit: function() {
                if (this.itemTitle == '' && this.itemContent == '') {
                    window.history.go(-1);
                    return;
                }
                $.confirm('是否放弃编辑？', () => {
                    window.history.go(-1);
                });
            }
        }
    }
</script>

<style>
    .list-block {
        margin: 0;
        height: 100%;
    }
    
    .list-block ul {
        height: 100%;
    }
</style>